<template>
    <div id="app">
        <!--头部-->
        <div class="container-fluid header hidden-sm hidden-xs">
            <ul class="container">
                <li>
                    <router-link tag="a" to="/home" style="color: #fff;">蜀帅首页</router-link>
                </li>
                <li>
                    <router-link tag="a" to="/about" style="color: #fff;">关于我们</router-link>
                </li>
                <li>
                    <router-link tag="a" to="/product" style="color: #fff;">产品系列</router-link>
                </li>
                <li>
                    <router-link tag="a" to="/home" style="color: #fff;"></router-link>
                </li>
                <li>
                    <router-link tag="a" to="/join" style="color: #fff;">招商加盟</router-link>
                </li>
                <li>
                    <router-link tag="a" to="/news" style="color: #fff;">新闻资讯</router-link>
                </li>
                <li>
                    <router-link tag="a" to="/contact" style="color: #fff;">联系我们</router-link>
                </li>
            </ul>
        </div>
        <!--侧边栏-->
        <div class="container-fluid hidden-md hidden-lg sm-logo">
            <h1>
                <a href="/"></a>
            </h1>
            <div>
                <Button @click="value1 = true" type="primary">
                    <Icon type="md-apps"/>
                </Button>
                <Drawer title="" :closable="false" v-model="value1">
                    <router-link to="/home" tag="p">蜀帅首页</router-link>
                    <router-link to="/about" tag="p">关于我们</router-link>
                    <router-link to="/news" tag="p">新闻资讯</router-link>
                    <router-link to="/product" tag="p">产品系列</router-link>
                    <router-link to="/join" tag="p">招商加盟</router-link>
                    <router-link to="/contact" tag="p">联系我们</router-link>
                </Drawer>
            </div>
        </div>

        <!--路由放置处-->
        <router-view></router-view>

    </div>
</template>

<script>
    import router from "./router"
    // import BMap from 'BMap'
    // import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

    export default {
        data() {
            return {
                // logImgUrl: "assets/images/chanpin/header-logo.png",
                flag: true, // 控制图标
                value1: false, // iview侧边栏
            }
        },
        mounted() {
            // this.mapInit()
        },
        methods: {
            changFlag() {
                this.flag = !this.flag
            },
            wowInit(){
                var wow = new WOW({
                    boxClass: 'wow',
                    animateClass: 'animated',
                    offset: 250,
                    mobile: true,
                    live: true
                });
                wow.init();
            },
        },
        mounted(){
            this.wowInit()
        },
        router
    }
</script>

<style lang="less">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box; /*  css3 盒子模型 */
    }

    #app {
        /*border-top: 1px solid transparent;*/
    }

    @media (min-width: 992px) {
        /*html,body{*/
        /*background: url("../src/assets/background.png");*/
        #app {
            background: url("../src/assets/background.png");
            background-size: cover;
        }
    }

    @media (max-width: 992px) {
        #app {
            /*background-color: #eaeaea;*/
        }
    }

    html, body {
        /*border-top: 1px solid transparent;*/
        width: 100%;
        clear: both;
    }

    a {
        color: #fff;
        font-size: 18px;

        &:link {
            color: #fff;
            text-decoration: transparent;
        }

        &:active {
            color: #fff;
            text-decoration: transparent;
        }

        &:hover {
            color: #fff;
            text-decoration: none;
        }
    }

    /*pc顶部*/
    .header {
        background-color: #000;
        height: 86px;
        position: relative;
        z-index: 2;

        ul {
            display: flex;
            justify-content: center;

            li {
                flex: 1;
                height: 86px;
                width: 45px;
                text-align: center;
                position: relative;

                a {
                    display: block;
                    width: 100%;
                    height: 86px;
                    line-height: 86px;
                }

                &:nth-of-type(4) {
                    > a {
                        display: block;
                        width: 100%;
                        height: 105px;
                        background: url("./assets/images/chanpin/header-logo.png") no-repeat center center;
                        background-size: cover;
                        position: absolute;
                        top: -1px;
                    }
                }
            }
        }
    }

    /*移动端顶部*/
    .sm-logo {
        background-color: #333;
        /*margin-right: 10px;*/
        height: 60px;

        h1 {
            float: left;
            width: 90px;
            height: 60px;
            display: block;
            margin: 0;

            a {
                width: 100%;
                height: 100%;
                display: block;
                background: url("./assets/images/chanpin/header-logo.png") no-repeat center center;
                background-size: cover;
            }
        }

        .my-down {
            float: right;
            margin-top: 10px;
            position: relative;

            #dropdownMenu1 {
                padding: 0;
            }

            .btn-default {
                color: #fff;
                background-color: transparent;
                border-color: transparent;

                &:link {
                    color: #fff;
                    background-color: transparent;
                    border-color: transparent;

                }

                &:active {
                    color: #fff;
                    background-color: transparent;
                    border-color: transparent;

                }

                &:hover {
                    color: #fff;
                    background-color: transparent;
                    border-color: transparent;

                }

                i {
                    font-size: 27px;
                    text-align: right;
                }
            }
        }

        /* 侧边栏 */

        .ivu-btn-primary {
            float: right;
            background-color: transparent !important;
            border-color: transparent !important;
            font-size: 27px;


        }


    }

    /*侧边栏*/
    .ivu-drawer-content {
        background-color: rgba(15, 15, 15, .8) !important;

        p {
            font-size: 18px;
            text-align: center;
            padding: 15px;
            color: #f3f8f1;
            cursor: pointer;
        }
    }
    .click-current {
        background: url("assets/images/chanpin/header_nav_current.png") no-repeat center center;
        background-position: 84px 20px;
    }
</style>
